<template>
  <div class="graph-module-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="main-container">
        <div class="tabs">
          <div class="tab-btns">
            <div
              :class="['tab-pane', tabsActive === 'drawing' ? 'active' : '']"
              @click="handleSwitch('drawing')">
              图纸管理
            </div>
            <div
              :class="['tab-pane', tabsActive === 'model' ? 'active' : '']"
              @click="handleSwitch('model')">
              图模联动
            </div>
          </div>
          <el-button v-if="hasTabUpload" type="primary" @click="uploadVisible = true">上 传</el-button>
        </div>
        <div class="tabs-container">
          <div :class="['list', isCollapse ? 'close' : 'open']">
            <div class="btn">
              <span>模型列表</span>
            </div>
            <i
              :class="[
              'iconfont',
              'iconzhankai',
              isCollapse ? 'close' : 'open'
              ]"
              @click="handleOnOff">
            </i>
            <ul class="el-menu-vertical">
              <li
                :class="{ active: activeIndex === index }"
                v-for="(item, index) in modelList"
                @click="handleChange({ ...item, index })"
                :key="index"
              >
                <span class="item" :title="item.fileName">{{ item.fileName }}</span>
              </li>
            </ul >
          </div>
          <div class="bimface-main">
            <div :class="['drawing-container', tabsActive === 'drawing' ? 'active' : '']">
              <bim-face-pro
                :drawingId="drawingId"
                viewType="drawingView"
                ref="bimfaceDrawing"
                :viewAddedFn="handleDrawingLoad"
                :loaderOptions="drawingOptions">
              </bim-face-pro>
            </div>
            <div :class="['model-container', tabsActive === 'model' ? 'active' : '']">
              <bim-face-pro
                ref="bimfaceModel"
                :loaderOptions="modelOptions"
                :viewAddedFn="handleViewLoad">
              </bim-face-pro>
            </div>
          </div>
          <upload-model
            :visible="uploadVisible"
            :loading="btnLoading"
            :hasBimface="false"
            accept=".dwg,.pdf"
            @submit="handleUpload"
            @cancel="uploadVisible = false">
          </upload-model>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import BimFacePro from '@/components/bimface/project';
import Breadcrumb from '@/components/public/Breadcrumb';
import UploadModel from '@/components/project/technologyManage/uploadModel';

// 图模联动
export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '技术管理',
        },
        {
          name: '施工图'
        }
      ],
      tabsActive: 'drawing',
      isCollapse: false,
      // 模型数据
      modelList: [],
      // 当前选择项
      activeIndex: 0,
      // 当前选中项的数据
      currentItem: {},
      // 图纸配置
      drawingOptions: {},
      // 模型配置
      modelOptions: {},
      drawingId: '',
      uploadVisible: false,
      btnLoading: false,
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    projectName() {
      return this.$store.state.currentProjectInfo.projectName;
    }
  },
  created() {
    this.getBimfaceList();
  },
  components: {
    BimFacePro,
    Breadcrumb,
    UploadModel
  },
  methods: {
    /**
     * 获取所有模型
     * @param options 参数
     */
    async getBimfaceList(options = {}) {
      try {
        const params = {
          project_name: this.projectName,
          projectId: this.projectId,
          pageFlag: false,
          ...options
        };
        if (this.tabsActive === 'drawing') {
          // 图纸查询
          params.moduleType = '4';
        } else {
          params.fileType = '1';
        }
        const { success, data: { data }} = await this.$Model.getBimfaceList(params);
        if (success && data.list) {
          this.modelList = data.list || [];
          const currentItem = this.modelList[0];
          if (currentItem) {
            if (this.tabsActive === 'drawing') {
              this.setDrawing(currentItem);
              return;
            }
            this.drawingId = currentItem.drawId;
            this.setModel(currentItem);
            this.setDrawing(currentItem);
          }
        }
      } catch (e) {}
    },
    /**
     * 上传模型
     * @param options {File} 文件信息
     */
    async handleUpload(options) {
      const { file, fileName } = options;
      const fm = new FormData();
      fm.append('file', file);
      const params = {
        fileName,
        moduleType: '4',
        projectName: this.projectName,
        projectId: this.projectId
      };
      this.btnLoading = true;
      const { success } = await this.$Model.bimfaceUpload({
        file: fm,
        ...params
      });
      this.btnLoading = false;
      if (success) {
        this.$message.success('上传成功');
        this.uploadVisible = false;
        this.getBimfaceList();
      }
    },
    /**
     * 切换tabs
     * @param type {String} tabs类型
     */
    handleSwitch(type) {
      this.tabsActive = type;
      this.getBimfaceList();
    },
    handleOnOff() {
      this.isCollapse = !this.isCollapse;
    },
    /**
     * 切换模型
     * @param data {Object} 切换的模型数据
     */
    handleChange(data) {
      console.log(data);
      if (!data) return;
      const { index, drawId } = data;
      this.activeIndex = index;
      this.currentItem = { ...data };
      this.drawingId = drawId;
      if (this.tabsActive === 'drawing') {
        this.drawingId = '';
        this.setDrawing(this.currentItem);
        return;
      }
      this.setModel(this.currentItem);
      drawId && this.setDrawing(this.currentItem);
    },
    /**
     * bimface模型加载完成
     * @param viewer: bimface实例
     * @param viewApp
     */
    handleViewLoad(viewer, viewApp) {
      /* eslint-disable */
      const eventType = Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked;
      viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, (e) => {
        // 三维构件ID
        const { objectId } = e;
        // 图纸app对象
        const drawingApp = this.$refs.bimfaceDrawing.viewApp;
        // 三维构件ID换取对应的图纸图元ID
        const drawingId = drawingApp.toDrawingId(objectId);
        if (drawingId) {
          // 缩放到对应位置
          drawingApp._drawingViewer.zoomToObject(String(drawingId));
          drawingApp._drawingViewer.update();
        }
      });
    },
    /**
     * bimface图纸加载完成
     * @param viewer: bimface实例
     * @param viewApp
     */
    handleDrawingLoad(viewer, viewApp) {
      /* eslint-disable */
      const eventType = Glodon.Bimface.Viewer.ViewerDrawingEvent.ComponentsSelectionChanged;
      viewApp.addEventListener(eventType, (e) => {
        if (e && e.length) {
          // 图纸图元ID换取对应的三维构件ID
          const modelId = viewApp.toModelId(e[0]);
          // 模型app对象
          const modelApp = this.$refs.bimfaceModel.viewApp;
          const viewer3D = modelApp && modelApp.getViewer();
          if (!viewer3D) return;
          // 取消构件隔离
          viewer3D.clearIsolation();
          // 定位到该构件
          viewer3D.setSelectedComponentsById([modelId]);
          // 是否存在构件
          const isExist = viewer3D.getViewer().getComponentInfoByUserId(modelId);
          console.log('isExist_____________', isExist);
          if (isExist) {
            // 隔离构件，其他半透明
            viewer3D.isolateComponentsById([modelId], Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent);
            // 集成模型需要把fileid加进去
            // viewer3D.isolateComponentsById([_fileid+'.'+rid], Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent);
            // 定位到该构件
            // viewer3D.setSelectedComponentsById([_fileid+'.'+rid]);
            viewer3D.zoomToSelectedComponents();
            return;
          }
          this.$message.warning('暂无对应构件');
          viewer3D.clearIsolation();
          viewer3D.render();
        }
      });
    },
    setModel(options) {
      this.modelOptions = options;
    },
    setDrawing(options) {
      console.log('options', options);
      this.drawingOptions = options;
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/main";

  .graph-module-page {
    width: 100%;
    height: 100%;
    background: $baseBg;
    main {
      width: 100%;
      height: calc(100% - 40px);
      position: relative;
      background: $baseBg;
      padding: 20px;
    }
    .main-container {
      width: 100%;
      height: 100%;
      background: $mainBg;
      border-radius: 10px;
      padding: 10px;
      overflow: hidden;
    }
    .tabs {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tab-btns {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .tab-pane {
        width: 120px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 10px;
        margin: 0 5px;
        color: #fff;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all .5s;
        &.active {
          color: $mainColor;
          border-bottom: 2px solid #fff;
        }
        &:hover {
          color: $mainColor;
          /*background: $mainBtnBg;*/
        }
      }
    }
    .tabs-container {
      width: 100%;
      height: calc(100% - 60px);
      position: relative;
      .list {
        position: absolute;
        width: 260px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 8;
        &.open {
          transition: all .3s;
          transform: translateX(0%);
          i {
            transition: all .3s;
            transform: rotate(-180deg);
            border-radius: 10px 0 0 10px;
          }
          /*.btn {
            transition: all .5s;
            transform: translateX(0%);
            i {
              transform: rotate(-180deg);
            }
          }
          .el-menu-vertical {
            position: relative;
            transform: translateX(0%);
          }*/
        }
        &.close {
          transition: all .3s;
          transform: translateX(-100%);
          i {
            transition: all .3s;
            transform: rotate(0deg);
            border-radius: 0 10px 10px 0;
          }
         /* .btn {
            transition: all .3s .3s;
            transform: translateX(-210px);
            i {
              transform: rotate(0deg);
            }
          }
          .el-menu-vertical {
            transform: translateX(-100%);
          }*/
        }
        .btn {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          color: $mainColor;
          background: $mainBg;
          border-bottom: 1px solid #f4f4f4;
        }
        i {
          width: 30px;
          height: 30px;
          position: absolute;
          top: calc(50% - 25px);
          right: -50px;
          display: flex;
          z-index: 8;
          justify-content: center;
          align-items: center;
          font-size: 25px;
          padding: 30px;
          background: $mainBg;
        }
        .el-menu-vertical {
          height: calc(100% - 40px);
          overflow: auto;
          background: $mainBg;
          z-index: 8;
          &.open {
            transform: translateX(0%);
          }
          &.close {
            transform: translateX(-100%);
          }
          li {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0 20px;
            border-right: 3px solid transparent;
            cursor: pointer;
            transition: all .3s;
            &.active {
              color: $mainColor;
              border-right: 3px solid #fff;
              background: rgba(10, 16, 52, .5);
            }
          }
        }
        .item {
          width: 100%;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .menu-container {
      position: absolute;
      width: 200px;
      z-index: 7;
      top: 25%;
      left: 0;
      ul {
        width: 100%;
        height: 100%;
        max-height: 500px;
        overflow: auto;
        li {
          width: 100%;
          height: 40px;
          padding: 0 10px;
          margin: 5px 0;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          color: #fff;
          background: rgba(31, 70, 220, .2);
          transition: all .2s;
          &.active {
            background-color: $mainBtnBg;
            &:hover {
              background-color: $lightBtnBg;
            }
          }
          &:hover {
            background-color: $mainBtnBg;
          }
        }
      }
    }
    .bimface-main {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .drawing-container {
        width: 50%;
        height: 100%;
        float: left;
        &.active {
          width: 100%;
          /*animation: bim .2s;*/
          /*animation-fill-mode: forwards;*/
        }
      }
      .model-container {
        width: 50%;
        height: 100%;
        float: left;
      }
    }
    @keyframes bim {
      0% {
        width: 50%;
      }
      100% {
        width: 100%;
      }
    }
  }
</style>
